<template>
  <div class="gallery"  @click="haddleGalleryClick">
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,key) in imgs" :key="key">
          <img class="swiper-img" :src="item">
        </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallery',
  props:{
      imgs:{
        type:Array,
        // default(){
        //   return [
        //     // 'static/img/detail-banner1.jpg',
        //     // 'static/img/detail-banner2.jpg',
        //     // 'static/img/detail-banner3.jpg',
        //   ]
        // }
      }
  },
  data() {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination',
          paginationType: 'fraction', //设置分页器 样式为分式
          loop:true,
          observer:true,
          observeParents:true,
        },
      }
    },
  methods:{
    haddleGalleryClick(){
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
.gallery >>> .swiper-container
    overflow  inherit
.gallery
    display flex
    z-index 99
    flex-direction column  //可以将文字变成一列
    justify-content  center //可以让子元素居中显示
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background #000
    .wrapper
        background #fff
        width 100%
        height 0
        padding-bottom 90%
        .swiper-img 
          width 100%
          height 6.75rem
        .swiper-pagination
          color #ffffff
          bottom -1rem
</style>